{% extends "layout.html" %}
{% load static %}

{% block title %}
    Редактирование профиля — {{ block.super }}
{% endblock %}

{% block css %}
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="content user-edit">
        <div class="form-title">😎<br>Редактирование профиля</div>

        {% if form.non_field_errors %}
            <div class="form-row form-row-center">
                {% for error in form.non_field_errors %}
                    <span class="form-row-errors">{{ error }}</span>
                {% endfor %}
            </div>
        {% endif %}

        <div class="block">
            <div class="block-description block-description-center">
                <p>
                    E-mail для входа и уведомлений: <strong>{{ user.email }}</strong>
                </p>

                <p>
                    Ваш юзернейм в Клубе: <strong>{{ user.slug }}</strong>
                </p>
            </div>

            <div class="block-description">
                Сменить их можно, только <a href="mailto:club@vas3k.club">написав нам</a> на почту.
                От смены этих настроек могут поломаться комментарии и всякие уведомления,
                потому мы предпочитаем делать это руками.
            </div>
        </div>

        <form action="{% url "edit_profile" user.slug %}" method="post" class="intro-form" enctype="multipart/form-data">
            {% csrf_token %}

            <div class="block">
                <div class="form-row">
                    <user-avatar-input
                        input-id="{{ form.avatar.id_for_label }}"
                        current-avatar="{{ user.get_avatar }}"
                    ></user-avatar-input>
                    {{ form.avatar }}
                    {% if form.avatar.errors %}<span class="form-row-errors">{{ form.avatar.errors }}</span>{% endif %}
                </div>

                <div class="form-row">
                    <label for="{{ form.company.id_for_label }}" class="form-label">
                        Компания
                    </label>
                    {{ form.company }}
                    {% if form.company.errors %}<span class="form-row-errors">{{ form.company.errors }}</span>{% endif %}
                </div>

                <div class="form-row">
                    <label for="{{ form.position.id_for_label }}" class="form-label">
                        Должность
                    </label>
                    {{ form.position }}
                    {% if form.position.errors %}<span class="form-row-errors">{{ form.position.errors }}</span>{% endif %}
                </div>

                <div class="form-row">
                    <label for="{{ form.bio.id_for_label }}" class="form-label">
                        Ссылочки на себя и всякое такое
                    </label>
                    {{ form.bio }}
                    {% if form.bio.errors %}<span class="form-row-errors">{{ form.bio.errors }}</span>{% endif %}
                    <span class="form-row-help">
                        Используйте Markdown и Эмодзи чтобы сделать красиво. Всё зависит от вашего воображения
                    </span>
                </div>

                <div class="form-row">
                    <label for="{{ form.country.id_for_label }}" class="form-label">
                        Страна и город
                    </label>
                    {{ form.country }} {{ form.city }}
                    {% if form.country.errors %}<span class="form-row-errors">{{ form.country.errors }}</span>{% endif %}
                    {% if form.city.errors %}<span class="form-row-errors">{{ form.city.errors }}</span>{% endif %}
                </div>

                <div class="form-row">
                    <label class="form-label">
                        Где отображать вас на общей <strong><a href="{% url "people" %}">карте</a></strong>?
                    </label>
                    <location-select
                        latitude-field-name="latitude"
                        longitude-field-name="longitude"
                        :default-latitude="{{ user.latitude | default:0.0 | stringformat:"f" }}"
                        :default-longitude="{{ user.longitude | default:0.0 | stringformat:"f" }}"
                    ></location-select>
                    {% if form.latitude.errors %}<span class="form-row-errors">Latitude: {{ form.latitude.errors }}</span>{% endif %}
                    {% if form.longitude.errors %}<span class="form-row-errors">Longitude: {{ form.longitude.errors }}</span>{% endif %}
                    {% if form.geo.errors %}<span class="form-row-errors">Geo: {{ form.geo.errors }}</span>{% endif %}
                </div>

                <button type="submit" class="button button-big" name="profile_publicity_level" value="{{ user.profile_publicity_level }}">Сохранить изменения</button>

                <div class="clearfix50"></div>
            </div>

            <div class="block">
                <div class="block-header">🥷 Публичность профиля</div>

                <div class="block-description">
                    <p>
                        Эта настройка влияет только на то, как видят вас люди, не зарегистрированные в Клубе. Для членов Клуба ваш профиль, интро и контакты всегда доступны.
                    </p>

                    <p>
                        {% if user.profile_publicity_level == 'public' %}
                            Сейчас ваш профиль <strong>ОТКРЫТ</strong> для большого интернета по ссылке: <a href="{{ settings.APP_HOST }}{% url "profile" user.slug %}" target="_blank">{{ settings.APP_HOST }}{% url "profile" user.slug %}</a>
                        {% else %}
                            Сейчас ваш профиль <strong>СКРЫТ</strong> от большого интернета.
                        {% endif %}

                        Ваши комментарии в публичных постах {% if user.profile_publicity_level == 'private' %}<strong>НЕ ВИДНЫ</strong>{% else %}<strong>ВИДНЫ</strong>{% endif %}.
                    </p>
                </div>

                <div class="block-description block-description-center">
                    {% if form.profile_publicity_level.errors %}
                        <span class="form-row-errors">{{ form.profile_publicity_level.errors }}</span>
                    {% endif %}

                    <div class="form-row">
                        <div class="big-radio">
                            <div class="big-radio-item">
                                {{ form.profile_publicity_level.0.tag }}
                                <label for="{{ form.profile_publicity_level.0.id_for_label }}" class="big-radio-label">
                                    <i class="fas fa-ambulance"></i>
                                    <span class="big-radio-title">{{ form.profile_publicity_level.0.choice_label }}</span>
                                    <span class="big-radio-description">Скрывает ваши комменты и био в публичных постах. Не дает находить вас через бота.</span>
                                </label>
                            </div>
                            <div class="big-radio-item">
                                {{ form.profile_publicity_level.1.tag }}
                                <label for="{{ form.profile_publicity_level.1.id_for_label }}" class="big-radio-label">
                                    <i class="fas fa-smile"></i>
                                    <span class="big-radio-title">{{ form.profile_publicity_level.1.choice_label }}</span>
                                    <span class="big-radio-description">Профиль скрыт от интернета, но ваши комментарии в публичных постах видны</span>
                                </label>
                            </div>
                            <div class="big-radio-item">
                                {{ form.profile_publicity_level.2.tag }}
                                <label for="{{ form.profile_publicity_level.2.id_for_label }}" class="big-radio-label">
                                    <i class="fas fa-star"></i>
                                    <span class="big-radio-title">{{ form.profile_publicity_level.2.choice_label }}</span>
                                    <span class="big-radio-description">Профиль и интро видны даже из большого интернета, прям как соцсетка!</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <p>
                        ⚠️ Приватность профиля не означает, что ваши данные не смогут украсть злые люди. Эта опция лишь усложняет жизнь ботам, но вас всё так же могут спалить другие люди.
                    </p>
                </div>

                <button type="submit" class="button button-big">Сохранить настройки публичности</button>

                <div class="clearfix50"></div>
            </div>
        </form>
    </div>
{% endblock %}
